<template>
  <div id="drawer-target">
    <n-card>
      <!-- 搜索 -->
      <HeadSearch :info="search" @search="handleSearch" @reset="handleSearch" @sel-change="searchChange" />

      <!-- 表格 -->
      <DataTable
        ref="tableRef"
        :columns="columns"
        :row-key="(row) => row.id"
        :request="loadDataTable"
        size="large"
        striped
        :pagination-setting="pagination"
      >
        <template v-if="permissionStore.includes('task:allTask:create')" #tableTitle>
          <!-- <template #tableTitle> -->
          <n-button type="primary" @click="handleModal"><n-icon size="18"><AddOutline /></n-icon> 新建 </n-button>
        </template>
      </DataTable>
    </n-card>
  </div>

  <!-- 新增、编辑弹窗 -->
  <TaskModal v-if="modalShow" v-model:visible="modalShow" :type="modalType" :data="rowData" :detail="detail" @reload="handleSearch" />

  <!-- 详情 - 抽屉 -->
  <n-drawer v-model:show="showDraw" :width="'calc(100% - 2px)'" :placement="'right'" resizabl to="#drawer-target">
    <n-drawer-content :title="drawTitle" closable>
      <draw-comp :detail="rowData" :draw-title="drawTitle" :live-video-show="playLiveVideo" @close="showDraw = false;handleSearch()" />
    </n-drawer-content>
  </n-drawer>

  <VerifyDrawer v-model:visible="auditDraw" :data="rowData" />
</template>

<script>
import { toRefs, reactive, unref, onUnmounted, watch } from 'vue'
import { useUserStore } from '@/store/modules/user'
import HeadSearch from '@/components/Search/index.vue'
import DataTable from '@/components/DataTable/index.vue'
import TaskModal from './components/TaskModal.vue'
import VerifyDrawer from './components/VerifyDrawer.vue'
import DrawComp from './components/DrawComp.vue'
import table from './tools/table'
import { search, getAirInfo, getWayInfo } from './tools/search'
import pagination from './tools/pagination'
import { getTaskList } from '@/api/task'
import { usePermissionStore } from '@/store/modules/permission'
import { useRouter } from 'vue-router'

export default {
  name: 'TaskAll',
  components: { HeadSearch, DataTable, TaskModal, VerifyDrawer, DrawComp },
  setup() {
    const permissionStore = usePermissionStore().accessPermissionCodes // 按钮权限
    const roleDeptId = useUserStore().userInfo.deptId // 该角色的部门id
    table.setUserDetpId(roleDeptId)
    // getDeptInfo(roleDeptId)
    getAirInfo()
    const data = reactive({
      ...toRefs(table),
      ...toRefs(search),
      router: useRouter()
    })

    // 请求接口
    const loadDataTable = async(res) => {
      const _params = {
        ...unref(data.searchParams),
        ...res
      }
      return await getTaskList(_params)
    }

    // 新增
    function handleModal() {
      // data.rowData = null
      // data.modalType = 'create'
      // data.modalShow = true
      data.router.push({
        path: '/home',
        query: {
          type: 'create',
          flag: true
        }
      })
    }
    onUnmounted(() => {
      data.searchParams = null
      data.showDraw = false
      data.auditDraw = false
    })

    const searchChange = params => {
      if (params.key === 'airportId') {
        getWayInfo(params.value)
      }
    }
    // watch(() => data.taskId, newV => {
    //   console.log(11111111)
    //   if (data.taskId) {
    //     data.router.push({
    //       path: '/home',
    //       query: {
    //         type: 'edit',
    //         taskId: data.taskId
    //       }
    //     })
    //   }
    // }, {
    //   deep: true
    // })

    return {
      ...toRefs(data),
      handleModal,
      loadDataTable,
      pagination,
      searchChange,
      permissionStore
    }
  }
}
</script>

<style>
.drawer-target {
  position: relative;
  width: 100%;
  height: 300px;
  border: 1px solid rgba(128, 128, 128, 0.2);
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
</style>
